<template>
	<el-card class="bury-develop-container">
		<div class="search">
			<el-input placeholder="请输入内容" v-model="search.requirementName" size="mini" class="name">
				<span slot="prepend">需求名称</span>
				<el-button slot="append" icon="el-icon-search" @click="handleQueryList"></el-button>
			</el-input>
		</div>
		<el-table :data="data" size="mini" border v-loading="tableLoading">
			<el-table-column
				v-for="item in columns"
				:key="item.prop"
				:prop="item.prop"
				:label="item.label"
				:show-overflow-tooltip="true"
				:sortable="item.sortable"
				:min-width="item.width">
				<template slot-scope="scope">
					<span v-if="item.prop === 'status'" :class="'status-' + scope.row.status">
						{{$requirementStatusObj[scope.row.status] || "--"}}
					</span>
					<span v-else-if="item.prop === 'createTime' || item.prop === 'updateTime'">
						{{scope.row[item.prop] ? $moment(scope.row[item.prop]).format("YYYY-MM-DD HH:DD:SS") : "--"}}
					</span>
					<span v-else>{{scope.row[item.prop] || "--"}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150" prop="action" align="center">
				<template slot-scope="scope">
					<div v-if="scope.row.status === 2 || scope.row.status === 3 || scope.row.status === 4">
						<el-button
							size="mini"
							type="text"
							@click="handleDevelop(scope)">开发
						</el-button>
						<el-button
							size="mini"
							type="text"
							v-if="scope.row.status < 5"
							@click="handleOnline(scope)">提交上线
						</el-button>
						<el-button
							size="mini"
							type="text"
							v-if="scope.row.status < 5"
							@click="handleReject(scope)">驳回
						</el-button>
					</div>
					<div v-else>
						<el-button
							size="mini"
							type="text"
							@click="handleDetail(scope)">查看
						</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSize"
			@current-change="handleCurrent"
			:current-page="search.currentPage"
			:page-sizes="[10, 20, 30, 40]"
			:page-size="search.pageSize"
			background
			layout="total, prev, pager, next, sizes, jumper"
			:total="search.total">
		</el-pagination>
		<el-dialog
			width="40%"
			:visible.sync="testDialog.visible"
			title="提交测试">
			<div>
				<!--				<span>当前有3个埋点没有实施，请实施完成后，再提交到测试！</span>-->
				<el-row>
					<el-col :span="3">
						<span>说明</span>
					</el-col>
					<el-col :span="21">
						<el-input type="textarea" v-model="testDialog.form.explain" size="mini" placeholder="请填写说明"></el-input>
					</el-col>
				</el-row>
			</div>
			<span slot="footer">
				<el-button size="mini" @click="handleCancelTest">取 消</el-button>
				<el-button size="mini" type="primary" @click="handleConfirmTest">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			width="40%"
			:visible.sync="rejectDialog.visible"
			title="驳回">
			<el-tag>目前已实施2个埋点，已实施的埋点驳回后将无法修改！</el-tag>
			<el-form
				:model="rejectDialog.form"
				:rules="rejectDialog.rules"
				size="mini"
				ref="rejectForm"
				label-position="left"
				label-width="80px">
				<el-form-item label="驳回到" prop="status">
					<el-select v-model="rejectDialog.form.status" placeholder="请选择">
						<el-option label="设计中" :value="0"></el-option>
						<!--						<el-option label="埋点审核" value="review"></el-option>-->
					</el-select>
				</el-form-item>
				<el-form-item label="说明">
					<el-input type="textarea" v-model="rejectDialog.form.explain"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button size="mini" @click="handleCancelReject">取 消</el-button>
				<el-button size="mini" type="primary" @click="handleConfirmReject('rejectForm')">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog
			width="50%"
			:visible.sync="developDialog.visible"
			title="开发提示">
			<div>
				<p v-for="(item, index) in developDialog.tipData" :key="index">
					{{ item.desc }}
				</p>
				<p class="title">1. {{developDialog.appItem.appName}}</p>
				<p>测试地址：{{developDialog.appItem.testAddress || "--"}}</p>
				<p>正式地址：{{developDialog.appItem.officialAddress || "--"}}</p>
			</div>
			<span slot="footer">
                <el-button size="mini" @click="developDialog.visible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleDevelopConfirm">去开发</el-button>
            </span>
		</el-dialog>
		<el-dialog
			width="40%"
			:visible.sync="onlineDialog.visible"
			title="提交上线">
			<el-tag>您确定要提交给栏目上线吗？</el-tag>
			<el-form
				:model="onlineDialog.form"
				:rules="onlineDialog.rules"
				size="mini"
				ref="rejectForm"
				label-position="left"
				label-width="80px">
				<el-form-item label="说明">
					<el-input type="textarea" v-model="onlineDialog.form.explain" placeholder="请输入提交说明"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer">
				<el-button size="mini" @click="handleCancelOnline">取 消</el-button>
				<el-button size="mini" type="primary" @click="handleConfirmOnline()">确 定</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
	export default {
		name: "developList",
		data() {
			return {
				requirementId: null,
				requirementRow: null,
				tableLoading: false,
				columns: [
					{
						prop: "requirementId",
						label: "需求ID",
						width: 80,
						tooltip: true
					},
					{
						prop: "requirementName",
						label: "需求名称",
						width: 180,
						minWidth: 180,
						tooltip: true
					},
					{
						prop: "bizName",
						label: "栏目名称",
						width: 180,
						tooltip: true
					},
					{
						prop: "version",
						label: "系统版本",
						width: 100,
						tooltip: true
					},
					{
						prop: "appName",
						label: "操作系统",
						width: 100,
						tooltip: true
					},
					{
						prop: "status",
						label: "状态",
						width: 100,
						tooltip: true
					},
					{
						prop: "creatorName",
						label: "开发人",
						width: 100,
						tooltip: true
					},
					{
						prop: "createTime",
						label: "创建时间",
						width: 150,
						tooltip: true
					},
					{
						prop: "updateTime",
						label: "更新时间",
						width: 150,
						tooltip: true
					},
				],
				data: [],
				search: {
					type: "my",
					requirementName: "",
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				testDialog: {
					visible: false,
					form: {
						explain: ""
					}
				},
				rejectDialog: {
					visible: false,
					form: {
						status: "",
						explain: ""
					},
					rules: {
						status: [
							{required: true, message: '请选择要驳回的类型', trigger: 'blur'},
						],
					}
				},
				onlineDialog: {
					visible: false,
					form: {
						explain: ""
					},
					rules: {}
				},
				developDialog: {
					visible: false,
					tipData: [
						{
							desc: "请在插入埋点代码之前，先进行采集sdk导入，导入流程请查看文档SDK导入。",
						},
						{
							desc: "请判断当前栏目运行于哪个站点下，然后将该站点的测试地址和正式地址设置到SDK的上报地址中。",
						},
						{
							desc: "栏目支持的所有站点的上报地址如下：",
						},
					],
					appItem: {
						appName: "",
						testAddress: "",
						officialAddress: ""
					}
				}
			}
		},
		created() {
			this.handleQueryList();
		},
		methods: {
			// 查询开发需求列表
			async handleQueryList() {
				this.tableLoading = true;
				let {requirementName, currentPage, pageSize} = this.search;
				let data = {
					requirementName,
					status: 2,
					currentPage,
					pageSize
				};
				try {
					let res = await this.$requirementApi.requirementList(data);
					if (res) {
						let {list, total} = res.value;
						this.data = list;
						this.search.total = total;
					}
					this.tableLoading = false;
				} catch (e) {
					this.tableLoading = false;
				}
			},
			handleCurrent(val) {
				this.search.currentPage = val;
				this.handleQueryList();
			},
			handleSize(val) {
				this.search.currentPage = 1;
				this.search.pageSize = val;
				this.handleQueryList();
			},
			// 开发
			handleDevelop(scope) {
				let {requirementId, appName, testAddress, officialAddress} = scope.row;
				this.requirementId = requirementId;
				this.developDialog.appItem = {
					appName,
					testAddress,
					officialAddress
				};
				this.developDialog.visible = true;
			},
			handleDevelopConfirm() {
				this.$router.push({
					path: `/buryDevelop/edit/${escape(this.requirementId)}`
				})
			},
			// 提交需求
			async handleRequirementStatus(action) {
				let data = {
					requirementId: this.requirementRow.requirementId,
					nowStage: this.requirementRow.status,
					action,
				};
				if (action === "提交") {
					data.targetStage = 3;
					data.desc = this.testDialog.form.explain;
				} else if (action === "驳回") {
					data.targetStage = this.rejectDialog.form.status;
					data.desc = this.rejectDialog.form.explain;
				} else if (action === "上线") {
					data.targetStage = 5;
					data.desc = this.onlineDialog.form.explain;
				}
				let res = await this.$processApi.processAdd(data);
				if (res) {
					this.$message.success(action + "成功");
					this.handleQueryList();
				}
			},
			// 测试
			handleTest(scope) {
				let {requirementId} = scope.row;
				this.requirementRow = scope.row;
				this.requirementId = requirementId;
				this.testDialog.visible = true;
			},
			// 测试：确定
			handleConfirmTest() {
				this.handleRequirementStatus("提交");
				this.testDialog.visible = false;
			},
			// 测试：取消
			handleCancelTest() {
				this.testDialog.form.explain = "";
				this.testDialog.visible = false;
			},
			// 驳回
			handleReject(scope) {
				let {requirementId} = scope.row;
				this.requirementRow = scope.row;
				this.requirementId = requirementId;
				this.rejectDialog.visible = true;
			},
			// 驳回：确定
			handleConfirmReject(rejectForm) {
				this.$refs[rejectForm].validate((valid) => {
					if (valid) {
						this.handleRequirementStatus("驳回");
						this.rejectDialog.visible = false;
					} else {
						return false;
					}
				})
			},
			// 驳回：取消
			handleCancelReject() {
				this.$refs["rejectForm"].resetFields();
				this.rejectDialog.visible = false;
			},
			// 上线
			handleOnline(scope) {
				let {requirementId} = scope.row;
				this.requirementRow = scope.row;
				this.requirementId = requirementId;
				this.onlineDialog.visible = true;
			},
			// 上线：确定
			handleConfirmOnline() {
				this.handleRequirementStatus("上线");
				this.onlineDialog.visible = false;
			},
			// 上线：取消
			handleCancelOnline() {
				this.onlineDialog.form.explain = "";
				this.onlineDialog.visible = false;
			},
			handleDetail(scope) {
				this.$router.push({
					path: `/buryDevelop/detail/${escape(scope.row.requirementId)}`,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bury-develop-container {
		.search {
			.name {
				width: 350px;
				margin-left: 5px;
			}
		}

		.status-success {
			color: #f5a753;
		}

		.status-error {
			/*color: #f5a753;*/
		}

		.el-dialog__body {
			.el-tag {
				width: 100%;
				margin: 10px 0;
			}
		}

		.title {
			font-weight: 500;
		}
	}
</style>
